﻿
<%@page contentType="text/html;charset=UTF-8"   language="java"  %>
<%
  	String base = request.getContextPath();
%><!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Market Place</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">


	<jsp:include page="/pages/common/include.jsp" flush="true"/>
    <link rel="stylesheet" href="<%=base%>/resources/css/confirmorder.css" />
    
    <link rel="stylesheet" href="<%=base%>/resources/css/calendar.css" />

    <style>
    
        .btnBox {
            position: inherit;
        }
    </style>
</head>

<body>
	<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
		<!--侧滑菜单部分-->
		<aside id="offCanvasSide" class="mui-off-canvas-left">
			<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<jsp:include page="/pages/common/menu.jsp" flush="true" />
				</div>
			</div>
		</aside>
		<!--主界面部分-->
		<div class="mui-inner-wrap">
			<header class="mui-bar mui-bar-nav" id="headBox">
				<jsp:include page="/pages/common/top.jsp" flush="true" />
			</header>
			<header class="mui-bar mui-bar-nav GreenHeader">
		        <h1 class="mui-title">Delivery & Payment</h1>
		    </header>
			<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper noHead">
				<div class="mui-scroll">
			        <div class="confirmOrder">
			           	<div class="stepBox">
							<div class="step active">Delivery & Payment</div>
							<div class="step">Summary</div>
							<div class="step">Complete</div>
						</div>
						<div class="delivery">
							<div class="yourOrder">
								<h1>Order List
									<span class="mui-pull-right"><img src="<%=base%>/resources/images/icon/delivery-jt-up.png" /></span>
								</h1>
								<div class="orderList"></div>
								<div class="totalOrder">Net Total</span><span class="mui-pull-right"></div>
							</div>
							<div class="main-info">
								<h1>Delivery details</h1>
								<div class="content">
						            <div class="selectCate hasLogin">
						                <select id="pickerBox" class="pickerBox">
				                          	<option>My Home</option>
				                          	<option>My Office</option>
				                          	<option>Wife's Office</option>
						                </select>
						                <div class="edit-address">
							                <p>
							                	<em>Name：</em>
							                	<input type="text" id="h_name" class="select" value="Joho" />
							                </p> 
							                <p>
							                	<em></em>
							                	<input type="text" id="h_surname" class="select" value="Jike" />
							                </p>  
							                <p>
							                	<em>Delivery Method：</em>
							                	<select id="h_method" class="select">
													<option value="Delivery">Delivery</option>
													<option value="Click and Collect">Click and Collect</option>
												</select>
							                </p>
						                	<p class="delivery-address">
						                		<em>Delivery address：</em>
						                		<span class="h_address">Rm 1502 Ma On House,Ma Tung Estate,Ma On Shan,N.T.</span>
						                	</p>
					                		<p class="pick-up-location">
						                		<em>Pick Up Location：</em>
												<input type="text" name="select" id="h_address" class="select" />
						                		<%--<select id="h_address" class="select">--%>
													<%--<option value="Fortress Hill Tower (Fo...)">Fortress Hill Tower (Fo...)</option>--%>
													<%--<option value="Fortress Hill Tower (Fo...)">Fortress Hill Tower (Fo...)</option>--%>
												<%--</select>--%>
											</p>
					                		<p>
					                			<em>Contact Number：</em>
					                			<input type="text" id="h_phone" class="select" value=" 9876 5432" />
					                		</p>
					                	</div>
						            </div>
						            <div class="selectCate noLogin">
						                <div class="edit-address">
							                <p>
							                	<em>Name：</em>
							                	<input type="text" id="n_name" class="select"  />
							                </p> 
							                <p>
							                	<em></em>
							                	<input type="text" id="n_surname" class="select" />
							                </p>  
							                <p>
							                	<em>Delivery Method：</em>
							                	<select id="n_method" class="select">
													<option value="Delivery">Delivery</option>
													<option value="Click and Collect">Click and Collect</option>
												</select>
							                </p>
						                	<p class="delivery-address">
						                		<em>Delivery address：</em>
						                		<input type="text" id="n_address1" class="select" />
						                	</p>
						                	<p class="delivery-address">
						                		<em></em>
						                		<input type="text" id="n_address2" class="select" />
						                	</p>
					                		<p>
					                			<em>Contact Number：</em>
					                			<input type="text" id="n_phone" class="select"  />
					                		</p>
					                	</div>
						            </div>
						            <a href="javascript:void(0)" class="mui-btn"><img src="<%=base%>/resources/images/icon/plusIcon.png"><span>Add New Address</span></a>
						        </div>
							</div>
							
							<div class="delivery-slot">
								<h1>Delivery Slot</h1>
								<div class="calendar">
									<div class="aboluo-tools">
										<a class="aboluo-month-a-perv mui-icon mui-icon-arrowleft" href="javascript:;"></a>
										<div class="aboluo-calendar-month"></div>
										<div class="aboluo-calendar-select-year"></div>
										<a class="aboluo-month-a-next mui-icon mui-icon-arrowright" href="javascript:;"></a>
									</div>
									<div class="aboluo-rilidiv">
										<table class="aboluo-rilitable" cellspacing="0" cellpadding="0" >
											<thead class="aboluo-rilithead">
												<tr>
													<th>Mon</td>
													<th>Tue</td>
													<th>Wed</td>
													<th>Thu</td>
													<th>Fri</td>
													<th>Sat</td>
													<th>Sun</td>
												</tr>
											</thead>
										</table>
									</div>
								</div>
							</div>
							<div class="time-range">
								<div class="orange-font">
									<em>15/04/2016</em> Same day delivery requires additional charge
								</div>
								<div class="time-section">
									<label>10:00 ~ 14:00</label>
									<label class="usable">14:00 ~18:00</label>
									<label class="usable">18:00 ~ 22:00</label>

								</div>
							</div>
							<div class="edit-info">
								<!--<div class="descript">** Addition charge would be applied for same day delivery.</div>-->
			                    <div class="checkBox active">
			                        <img src="<%=base%>/resources/images/icon/delivery-call.png">Call me before delivery arrives
			                        <span class="mui-pull-right"><img src="<%=base%>/resources/images/icon/delivery-select.png" /></span>
			                    </div>
			                    <!--<div class="checkBox">
			                        <img src="<%=base%>/resources/images/icon/delivery-refresh.png">Sync to my calendar
			                        <span class="mui-pull-right"><img src="<%=base%>/resources/images/icon/delivery-no-select.png" /></span>
			                    </div>-->
			                    <div class="descript">To ensure every customer gets their order delivered fresh and on time within our delivery windows, we cannot take requests for specific delivery times (e.g. before 3PM). We are sorry for any inconveniences caused.</div>
			                    <h4 class="title">Special Request<span class="mui-pull-right"><img src="<%=base%>/resources/images/icon/delivery-jt-up.png"></span></h4>
			                    <div class="textarea">
				                    <textarea id="content" placeholder="Please fill in your request here"></textarea>
			                    </div>
			                    <div class="btnBox">
			                    	<div class="mui-pull-left">
				                    	<a href="javascript:void(0)" class="mui-btn mui-action-back">Back to Shopping</a>
			                    	</div>
			                    	<div class="mui-pull-right">
			                    		<a href="javascript:void(0)" class="mui-btn payMent">Continue</a>
			                    	</div>
			                    </div>
			                </div>
						</div>
			            <div class="footer" id="footer">
							<jsp:include page="/pages/common/footer.jsp" flush="true" />
						</div>
			        </div>
				</div>
			</div>
			
			 <!--searchbar-->
			<div class="searchBar">
				<jsp:include page="/pages/common/search.jsp" flush="true" />
			</div>
			
			<div class="rightBottom animate"></div>
			
		</div>
	</div>
	<div id="screen">
		<div class="screenContent paymentBox">
			<div class="alert-title">
				Payment details<span class="mui-icon mui-icon-closeempty"></span>
			</div>
	    	<div class="orderPayment">
				<h4>Order List</h4>
				<p>Net Total (<em></em>items)<span class="mui-pull-right"></span></p>
	    	</div>
	    	<div class="cardholders">
				<h4>Payment Method </h4>
	    		<ul class="select-delivery">
					<li>
						<h4 class="active">Credit Card</h4>
						<div class="security commonstyle">
							<h5>Registered Credit Card</h5>
							<select id="selet-card" class="select-card">
							</select>
						</div>
						<div class="securityCode commonstyle">
							<h5>Security Code<input type="text" id="code" class="code" value="" />
								<a href="<%=base%>/pages/payment-gateway.jsp">(?)</a></h5>
							<div class="addCreditCard">
								<a href="javascript:void(0)" class="mui-btn">
									<img src="<%=base%>/resources/images/icon/plusIcon.png" />Add Credit Card</a>
							</div>
						</div>
					</li>
	    			<li class="active"><h4>Cash on delivery(?)</h4></li>
	    			<li><h4>Cheque on delivery</h4>
	    				<p>(Payee’s name is The Dairy Farm Company Limited,Please note cheque payment will not be accepted until first order has been delivered.) </p>
	    			</li>
	    		</ul>
	    		<div class="coupon">
	    			<h4>E-Coupon<span class="mui-icon mui-pull-right">
	    				<img src="<%=base%>/resources/images/icon/delivery-jt-up.png" />
	    			</span></h4>
	    			<div class="list"></div>
	    		</div>
	    		<div class="inputBox">
	    			<h4>Promotion Code</h4>
	    			<p>Enter Promotion Code    (if any)</p>
	    			<div class="input-btn">
		    			<input type="text" id="pcode" class="pcode" />
		    			<button>Submit</button>
	    			</div>
	    			<h4>Octopus Reward$</h4>
	    			<p>Octopus Card Number</p>
	    			<input type="text" id="pNumber" class="pNumber" />
	    			<p>How to earn Octopus Reward$?</p>
	    			<a href="javascript:void(0)" class="termsConditions">Terms & Conditions</a>
	    			<h4>E-invoice</h4>
	    			<p class="agree-protocol">I want to receive E-invoice</p>
	    		</div>
	    	</div>
	    	<div class="confirmBtn">
		   		<a href="javascript:void(0)" class="mui-btn mui-btn-block continue">Continue</a>
		    </div>
		</div>
	</div>
	<script src="<%=base%>/resources/js/confirm/confirm-detail.js" type="text/javascript"></script>
	<script type="text/javascript" src="<%=base%>/resources/js/confirm/calendar.js" ></script>
	<script src="<%=base%>/resources/js/confirm/confirm-payment.js" type="text/javascript"></script>
	<script>
		//主界面和侧滑菜单界面均支持区域滚动；
		mui('#offCanvasSideScroll').scroll();
		mui('#offCanvasContentScroll').scroll();
	</script>
</body>

</html>
